<template>
  <el-dialog
    :model-value="modelValue"
    width="900px"
    @close="handleClose"
    class="unified-dialog"
    :close-on-click-modal="false"
  >
    <template #header>
      <DialogHeader 
        icon="Refresh"
        title="重启历史详情"
        :description="detail?.node_name"
        type="info"
      />
    </template>
    
    <div v-if="detail" class="dialog-content">
      <!-- 节点信息 -->
      <el-descriptions title="节点信息" :column="2" border>
        <el-descriptions-item label="节点名称">
          {{ detail.node_name }}
        </el-descriptions-item>
        <el-descriptions-item label="组件类型">
          <el-tag :type="detail.component === 'fe' ? 'primary' : 'success'" size="small">
            {{ detail.component.toUpperCase() }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="集群标识">
          <el-tag type="info" size="small">{{ detail.cluster_tag }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="重启键">
          {{ detail.restart_key }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 重启信息 -->
      <el-descriptions title="重启信息" :column="2" border style="margin-top: 20px">
        <el-descriptions-item label="重启结果">
          <el-tag :type="getRestartResultType(detail.restart_result)" size="small">
            {{ getRestartResultText(detail.restart_result) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(detail.status)" size="small">
            {{ getStatusText(detail.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">
          {{ detail.start_time }}
        </el-descriptions-item>
        <el-descriptions-item label="结束时间">
          {{ detail.end_time }}
        </el-descriptions-item>
        <el-descriptions-item label="持续时间">
          {{ formatDuration(detail.duration_seconds) }}
        </el-descriptions-item>
        <el-descriptions-item label="执行次数">
          {{ detail.execution_count }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 统计信息 -->
      <el-descriptions title="统计信息" :column="3" border style="margin-top: 20px">
        <el-descriptions-item label="总尝试次数">
          <el-tag type="info">{{ detail.total_attempts }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="成功次数">
          <el-tag type="success">{{ detail.successful_restarts }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="失败次数">
          <el-tag type="danger">{{ detail.total_attempts - detail.successful_restarts }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 重启命令 -->
      <div style="margin-top: 20px">
        <h4 style="margin-bottom: 10px; color: #303133;">重启命令</h4>
        <el-input
          v-model="detail.restart_command"
          type="textarea"
          :rows="4"
          readonly
          class="code-block"
        />
      </div>

      <!-- 错误信息 -->
      <div v-if="detail.error_message" style="margin-top: 20px">
        <h4 style="margin-bottom: 10px; color: #f56c6c;">错误信息</h4>
        <el-alert
          :title="detail.error_message"
          type="error"
          :closable="false"
          show-icon
        />
      </div>

      <!-- 时间信息 -->
      <el-descriptions title="时间信息" :column="2" border style="margin-top: 20px">
        <el-descriptions-item label="创建时间">
          {{ detail.created_at }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ detail.updated_at }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import DialogHeader from '@/components/DialogHeader.vue'

const props = defineProps({
  modelValue: Boolean,
  detail: Object
})

const emit = defineEmits(['update:modelValue'])

// 重启结果映射
const restartResultMap = {
  'success': { text: '成功', type: 'success' },
  'failure': { text: '失败', type: 'danger' },
  'timeout': { text: '超时', type: 'warning' }
}

const getRestartResultText = (result) => {
  return restartResultMap[result]?.text || result
}

const getRestartResultType = (result) => {
  return restartResultMap[result]?.type || 'info'
}

// 状态映射
const statusMap = {
  'active': { text: '活跃', type: 'warning' },
  'resolved': { text: '已解决', type: 'success' },
  'max_attempts': { text: '达到最大次数', type: 'danger' }
}

const getStatusText = (status) => {
  return statusMap[status]?.text || status
}

const getStatusType = (status) => {
  return statusMap[status]?.type || 'info'
}

// 格式化持续时间
const formatDuration = (seconds) => {
  if (!seconds || seconds < 0) return '-'
  const minutes = Math.floor(seconds / 60)
  const secs = seconds % 60
  if (minutes > 0) {
    return `${minutes}分${secs}秒`
  }
  return `${secs}秒`
}

const handleClose = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped>
.code-block {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}

.code-block :deep(textarea) {
  background-color: #f5f7fa;
  color: #303133;
  font-family: 'Courier New', Courier, monospace;
}

h4 {
  font-weight: 600;
  font-size: 14px;
}

:deep(.el-descriptions__title) {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
}
</style>

